import React from 'react';
import { connect } from 'react-redux';
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components';
import Taro from '@tarojs/taro';
import pGet500juan from '@/images/service/get500juan.png';
import pCardTop from '@/images/service/cardTop.png';
import pDang from '@/images/service/dang.png';
import pMore from '@/images/service/more.png';
import pSdfzd from '@/images/service/sdfzd.png';
import pYgkcz from '@/images/service/ygkcz.png';
import pYqfw from '@/images/service/yqfw.png';

import './index.scss';
import MenuTabs from '../../pages/mainPages/menuTabs/index';

//模拟轮播图地址
const picturesList = [pGet500juan, pGet500juan, pGet500juan];

const bar = {
  title: '服务',
};
const background = {
  backgroundColor: '#ffdc26',
  contentWidth: 60,
};

const ServicePage = () => {
  return (
    <View className="totalPage_service">
      {background ? (
        background.src ? (
          <View
            className="topBackground"
            style={{
              height: background.contentWidth + Taro.$statusBarHeight + Taro.$titleHeight + 'px',
            }}
          >
            <Image className="topBackgroundImg" src={background.src}></Image>
          </View>
        ) : (
          <View
            className="topBackground"
            style={{
              background: background.backgroundColor,
              height: background.contentWidth + Taro.$statusBarHeight + Taro.$titleHeight + 'px',
            }}
          ></View>
        )
      ) : (
        <View className="topBackground"></View>
      )}
      <View className="fontPage">
        {!Taro.$isH5 && (
          <View
            className="topBar"
            style={{
              height: Taro.$titleHeight + 'px',
              top: Taro.$statusBarHeight + 'px',
            }}
          >
            {bar && (
              <>
                {bar.back ? (
                  <Image className="backIcon" onclick={() => Taro.navigateBack()} />
                ) : (
                  <View className="backIcon"></View>
                )}
                <Text className="title">{bar.title}</Text>
                <View className="backIcon"></View>
              </>
            )}
          </View>
        )}

        <View
          className="contentPage"
          style={{
            marginTop: Taro.$titleHeight + Taro.$statusBarHeight + 'px',
            height: 'calc(100% - ' + Taro.$titleHeight + 'px - ' + Taro.$statusBarHeight + 'px)',
          }}
        >
          <Swiper
            className="banner"
            indicatorColor="rgba(245,245,245,0.5)"
            indicatorActiveColor="#999"
            circular
            indicatorDots
            autoplay
          >
            {picturesList.length > 0 &&
              picturesList.map((picture, index) => (
                <SwiperItem key={'serviceSwipe_' + index}>
                  <Image className="bannerIcon" src={picture} key={'swiperImage' + index} />
                </SwiperItem>
              ))}
          </Swiper>

          <View className="parkService">
            <View className="pstitle">
              <Image className="sIcon" src={pYqfw} />
              <Text className="sText">园区服务</Text>
            </View>
            <View className="items">
              <View className="item">
                <Image className="sIcon" src={pDang} />
                <Text className="sText">交党费</Text>
              </View>
              <View className="item">
                <Image className="sIcon" src={pSdfzd} />
                <Text className="sText">水电费账单</Text>
              </View>
              <View className="item">
                <Image className="sIcon" src={pYgkcz} />
                <Text className="sText">员工卡充值</Text>
              </View>
              <View className="item">
                <Image className="sIcon" src={pMore} />
                <Text className="sText">更多</Text>
              </View>
            </View>
          </View>

          <Image className="ctIcon" src={pCardTop} />

          <MenuTabs tabIndex={1} />
        </View>
      </View>
    </View>
  );
};

export default connect(() => ({}))(ServicePage);
